export default class CanvasAnimation {
  el = null;
  source = [];
  currentImage = 0;
  width = null;
  height = null;
  arr = [];
  canStart = false;
  images = [];
  callback = null;
  /**
   * 构造函数
   * @param {Element} el canvas元素
   * @param {Array} source 图片数组
   * @param {Object} options canvas元素宽高
   * @param {*} arr 弃用
   */
  constructor(el, source, options, arr) {
    this.el = el;
    this.source = source;
    this.width = options.systemWidth;
    this.height = options.systemHeight;
    this.arr = arr;
    this.init();
    this.initPoster();
  }
  /**
   * 初始化
   */
  init() {
    const canvas = this.el;
    canvas.width = this.width;
    canvas.height = this.height;
    this.ctx = canvas.getContext("2d");
  }
  /**
   * 加载第一张图片，解决刚进页面白屏问题
   */
  initPoster() {
    const poster = new Image();
    poster.crossOrigin = "Anonymous";
    poster.src = this.source[0];
    poster.onload = () => {
      this.ctx.drawImage(poster, 0, 0, this.width, this.height);
      this.images.push(poster);
      this.loadImages();
    }
  }
  /**
   * 加载图片
   */
  loadImages() {
    let loadedImages = 0;
    let numImages = 0;
    let images = [];
    numImages = this.source.length;
    for (let i = 0, len = this.source.length; i < len; i++) {
      images[i] = new Image();
      images[i].crossOrigin = "Anonymous";
      images[i].onload = () => {
        if (++loadedImages >= numImages) {
          this.images = images;
          if (this.callback) {
            this.callback();
          } else {
            this.playAnimation();
          }
        }
      };
      images[i].src = this.source[i];
    }
  }
  /**
   * 播放序列帧
   */
  playAnimation() {
    this.timer = setInterval(() => {
      this.ctx.clearRect(0, 0, this.width, this.height);
      this.changeCurrentImage(this.currentImage + 1);

    }, 45)
    this.canStart = true;
  }
  /**
   * 更改下角标
   * @param {Number} current 当前图片数组下角标
   */
  changeCurrentImage(current) {
    this.ctx.fillRect(0, 0, this.width, this.height);
    if (current > this.images.length - 1) {
      current = 0;
    }
    this.ctx.drawImage(this.images[current], 0, 0, this.width, this.height);
    if (this.moveEl) {
      this.arr = [].concat(this.moveEl(this.currentImage < current));
    }
    this.currentImage = current;
  }
  /**
   * 点击元素
   * @param {Object} position 手指点击canvas的位置
   * @returns 点击位置的canvas元素
   */
  refechCanvas(position) {
    if (!this.canStart) return [];
    const who = [];
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.fillRect(0, 0, this.width, this.height);
    this.ctx.drawImage(this.images[this.currentImage], 0, 0, this.width, this.height);
    this.arr.forEach((v, i) => {
      this.ctx.beginPath();
      this.ctx.rect(v.x, v.y, v.width, v.height);
      this.ctx.stroke();
      if (position && this.ctx.isPointInPath(position.x, position.y)) {
        who.push(i);
      }
    });
    if (who.length) this.stopAnimation();
    return who;
  }
  /**
   * 暂停序列帧
   */
  stopAnimation() {
    clearInterval(this.timer);
    this.timer = null;
  }
  /**
   * 手动切换下一张序列帧图片
   */
  animationNext() {
    if (!this.canStart) return;
    if (this.currentImage >= this.images.length - 1) {
      this.currentImage = this.images.length - 1;
      return;
    }
    this.changeCurrentImage(this.currentImage + 1)
  }
  /**
   * 手动切换上一张序列帧图片
   */
  animationPrev() {
    if (!this.canStart) return;
    if (this.currentImage <= 0) {
      this.currentImage = 0;
      return
    };
    this.changeCurrentImage(this.currentImage - 1)
  }
  /**
   * 销毁序列帧
   */
  destory() {
    clearInterval(this.timer);
    this.timer = null;
    this.el = null;
    this.canStart = false;
  }
}